import styles from '@/layout/layout.module.less'
import {useNavigateSync} from 'libs'
import React from 'react'
import {Route, Routes} from 'react-router-dom'
import Layout from './layout'
import ExpenseOrder from './pages/bank/expense'
import ExpenseOrderCreate from './pages/bank/expense/create'

import Payment from './pages/bank/payment'
import PaymentCreate from './pages/bank/payment/create'
import Receipt from './pages/bank/receipt'
import ReceiptCreate from './pages/bank/receipt/create'
import Bank from './pages/base/bank'
import Customer from './pages/base/customer'
import Expense from './pages/base/expense'
import Product from './pages/base/product'
import Supplier from './pages/base/supplier'
import Warehouse from './pages/base/warehouse'
import HomeIndex from './pages/home'
import Inventory from './pages/inventory'
import Login from './pages/login'
import Purchase from './pages/order/buy/purchase'
import PurchaseCreate from './pages/order/buy/purchase/create'

import PurchaseReturn from './pages/order/buy/return'
import PurchaseReturnCreate from './pages/order/buy/return/create'

import SaleIndex from './pages/order/sale/index'
import SaleCreate from './pages/order/sale/index/create'
import SaleReturn from './pages/order/sale/return'
import SaleReturnCreate from './pages/order/sale/return/create'
import Account from './pages/system/account'
import Role from './pages/system/role'


function App() {
  let baseUrl = import.meta.env.BASE_URL
  useNavigateSync()

  return (
    <Routes>
      <Route path={baseUrl} element={<Login/>}/>
      <Route path={baseUrl} element={<Layout/>}>
        <Route path="home" element={<HomeIndex/>}/>
        <Route path="system">
          <Route path="account" element={<Account/>}/>
          <Route path="role" element={<Role/>}/>
        </Route>
        <Route path="base">
          <Route path="customer" element={<Customer/>}/>
          <Route path="supplier" element={<Supplier/>}/>
          <Route path="bank" element={<Bank/>}/>
          <Route path="warehouse" element={<Warehouse/>}/>
          <Route path="product" element={<Product/>}/>
          <Route path="expense" element={<Expense/>}/>
        </Route>
        <Route path="order">
          <Route path="buy">
            <Route path="purchase" element={<Purchase/>}/>
            <Route path="purchase/create/:id?" element={<PurchaseCreate/>}/>
            <Route path="return" element={<PurchaseReturn/>}/>
            <Route path="return/create/:id?" element={<PurchaseReturnCreate/>}/>
          </Route>
          <Route path="sale">
            <Route path="index" element={<SaleIndex/>}/>
            <Route path="index/create/:id?" element={<SaleCreate/>}/>
            <Route path="return" element={<SaleReturn/>}/>
            <Route path="return/create/:id?" element={<SaleReturnCreate/>}/>
          </Route>
        </Route>
        <Route path="inventory" element={<Inventory/>}/>
        <Route path="bank">
          <Route path="payment" element={<Payment/>}/>
          <Route path="payment/create/:id?" element={<PaymentCreate/>}/>
          <Route path="receipt" element={<Receipt/>}/>
          <Route path="receipt/create/:id?" element={<ReceiptCreate/>}/>
          <Route path="expense/list/:type" element={<ExpenseOrder/>}/>
          <Route path="expense/create/:id?" element={<ExpenseOrderCreate/>}/>
        </Route>
      </Route>
      <Route path="*" element={<NotFound/>}/>
    </Routes>
  )
}

// 404
function NotFound() {
  return (
    <div className={styles.router}>
      <div className={styles.imgBlock}>
        <div className={styles.img}/>
      </div>
      <div>
        <h1 className={styles.title}>404</h1>
        <div className={styles.desc}>抱歉，你访问的页面不存在</div>
      </div>
    </div>
  )
}


export default App
